<template>
    <div class="mobile-config pro">
        <div v-for="(item, key) in rCom" :key="key">
            <component :is="item.components.name" :configObj="configObj" ref="childData" :configNme="item.configNme"
                :key="key" @getConfig="getConfig" :index="activeIndex" :number="num" :num="item.num"></component>
        </div>
        <rightBtn :activeIndex="activeIndex" :configObj="configObj"></rightBtn>
    </div>
</template>
<script>
import toolCom from '../mobileConfigRight/index.js';
import { mapGetters } from 'vuex';
import rightBtn from '../rightBtn/index.vue';
export default {
    name: 'c_big_small_img',
    componentsName: 'big_small_img',
    cname: '大小图',
    props: {
        activeIndex: {
            type: null,
        },
        num: {
            type: null,
        },
        index: {
            type: null,
        },
    },
    components: {
        ...toolCom,
        rightBtn,
    },
    computed: {
        ...mapGetters(['adminProductClassify', 'productBrand']),
        //商品排序
        goodsSort() {
            return this.configObj.goodsSort.tabVal;
        },
        //选择方式
        tabConfig() {
            return this.configObj.tabConfig.tabVal;
        },
    },
    data() {
        return {
            defaultArray1: [
                {
                    img: '',
                    info: [
                        {
                            title: '标题',
                            value: '影片0',
                            tips: '选填，不超过20个字',
                            max: 20,
                            status: true
                        },
                        {
                            title: '链接',
                            value: '',
                            tips: '请输入链接',
                            max: 100,
                            status: true
                        }
                    ],
                    status: true
                }
            ],
            defaultArray2: [
                {
                    img: '',
                    info: [
                        {
                            title: '标题',
                            value: '影片1',
                            tips: '选填，不超过20个字',
                            max: 20,
                            status: true
                        },
                        {
                            title: '链接',
                            value: '',
                            tips: '请输入链接',
                            max: 100,
                            status: true
                        }
                    ],
                    status: true
                },
                {
                    img: '',
                    info: [
                        {
                            title: '标题',
                            value: '影片2',
                            tips: '选填，不超过20个字',
                            max: 20,
                            status: true
                        },
                        {
                            title: '链接',
                            value: '',
                            tips: '请输入链接',
                            max: 100,
                            status: true
                        }
                    ],
                    status: true
                }
            ],
            configObj: {},
            rCom: [
                {
                    components: toolCom.c_checked_tab2,
                    configNme: 'setUp',
                },
            ],
            mockTypeData: [],
            automatic: [
                // 展现形式
                //   {
                //     components: toolCom.c_title,
                //     configNme: 'itemStyle',
                //   },
                //   {
                //     components: toolCom.c_txt_tab,
                //     configNme: 'itemStyle',
                //   },
                {
                    components: toolCom.c_title,
                    configNme: 'isShowTitleConfig',
                },
                {
                    components: toolCom.c_txt_tab,
                    configNme: 'isShowTitleConfig',
                },
                {
                    components: toolCom.c_title,
                    configNme: 'topConfig',
                },
                {
                    // components: toolCom.c_my_select,//下拉框
                    components: toolCom.c_input_select,//下拉框和输入框组合
                    configNme: 'titleConfig',
                },
                {
                    components: toolCom.c_input,
                    configNme: 'descContent',
                },
                {
                    components: toolCom.c_input,
                    configNme: 'linkConfig',
                },
                {
                    components: toolCom.c_title,
                    configNme: 'bigTitle',
                },
                //   {
                //     components: toolCom.c_checkbox_group,
                //     configNme: 'typeConfig',
                //   },
                //   {
                //     components: toolCom.c_title,
                //     configNme: 'tabConfig',
                //   },
                {
                    components: toolCom.c_menu_list_show,
                    configNme: 'menuBigConfig',
                },
                {
                    components: toolCom.c_title,
                    configNme: 'smallTitle',
                },
                {
                    components: toolCom.c_menu_list_show,
                    configNme: 'menuSmallConfig',
                },
            ],
            setUp: 0,
            type: 0,
            lockStatus: false,
        };
    },
    watch: {
        num(nVal) {
            let value = JSON.parse(JSON.stringify(this.$store.state.mobildConfig.defaultArray[nVal]));
            this.configObj = value;
        },
        configObj: {
            handler(nVal, oVal) {
                this.$store.commit('mobildConfig/UPDATEARR', { num: this.num, val: nVal });
            },
            deep: true,
        },
        'configObj.setUp.tabVal': {
            handler(nVal, oVal) {
                this.setUp = nVal;
                var arr = [this.rCom[0]];
                if (nVal == 0) {
                    this.rCom = arr.concat(this.automatic);
                } else {
                    let tempArr = [
                        {
                            components: toolCom.c_title,
                            configNme: 'bgColor',
                        },
                        {
                            components: toolCom.c_bg_color,
                            configNme: 'topBgColor',
                        },
                        {
                            components: toolCom.c_bg_color,
                            configNme: 'topTitleColor',
                        },
                        {
                            components: toolCom.c_slider,
                            configNme: 'fontWeightConfig',
                        },
                        {
                            components: toolCom.c_slider,
                            configNme: 'titleFontConfig',
                        },
                        // 描述文本设置
                        {
                            components: toolCom.c_title,
                            configNme: 'descColor',
                        },
                        {
                            components: toolCom.c_bg_color,
                            configNme: 'descColor',
                        },
                        {
                            components: toolCom.c_slider,
                            configNme: 'descFontConfig',
                        },
                        // 电影标题设置
                        {
                            components: toolCom.c_title,
                            configNme: 'moviesTitleColor',
                        },
                        {
                            components: toolCom.c_bg_color,
                            configNme: 'moviesTitleColor',
                        },
                        {
                            components: toolCom.c_slider,
                            configNme: 'moviesTitleFont',
                        },
                        {
                            components: toolCom.c_slider,
                            configNme: 'moviesTitleFontWeight',
                        },
                        // 电影描述设置
                        {
                            components: toolCom.c_title,
                            configNme: 'moviesDescColor',
                        },
                        {
                            components: toolCom.c_bg_color,
                            configNme: 'moviesDescColor',
                        },
                        {
                            components: toolCom.c_slider,
                            configNme: 'moviesDescFont',
                        },
                        {
                            components: toolCom.c_slider,
                            configNme: 'moviesDescFontWeight',
                        },
                        // 电影时长设置
                        {
                            components: toolCom.c_title,
                            configNme: 'moviesTimeColor',
                        },
                        {
                            components: toolCom.c_bg_color,
                            configNme: 'moviesTimeColor',
                        },
                        // {
                        //     components: toolCom.c_bg_color,
                        //     configNme: 'bgColor',
                        // },
                        // {
                        //     components: toolCom.c_bg_color,
                        //     configNme: 'titleColor',
                        // },
                        // {
                        //     components: toolCom.c_bg_color,
                        //     configNme: 'priceColor',
                        // },
                        // {
                        //     components: toolCom.c_bg_color,
                        //     configNme: 'soldColor',
                        // },
                        // {
                        //     components: toolCom.c_title,
                        //     configNme: 'upConfig',
                        // },
                        // {
                        //     components: toolCom.c_slider,
                        //     configNme: 'upConfig',
                        // },
                        // {
                        //     components: toolCom.c_slider,
                        //     configNme: 'downConfig',
                        // },
                        // {
                        //     components: toolCom.c_slider,
                        //     configNme: 'lrConfig',
                        // },
                        // {
                        //     components: toolCom.c_slider,
                        //     configNme: 'contentConfig',
                        // },
                        // {
                        //     components: toolCom.c_slider,
                        //     configNme: 'mbConfig',
                        // },
                        // {
                        //     components: toolCom.c_title,
                        //     configNme: 'bgStyle',
                        // },
                        // {
                        //     components: toolCom.c_slider,
                        //     configNme: 'bgStyle',
                        // },
                        // {
                        //     components: toolCom.c_slider,
                        //     configNme: 'contentStyle',
                        // },
                    ];
                    this.rCom = arr.concat(tempArr);
                }
            },
            deep: true,
        },
        // 'configObj.titleConfig.val': {
        //     handler(nVal, oVal) {
        //         if (oVal && oVal != '类型' && oVal != this.configObj.menuBigConfig.typeName||!nVal) {
        //             this.configObj.menuBigConfig.list = [
        //                 {
        //                     img: '',
        //                     typeName:'',
        //                     info: [
        //                         {
        //                             title: '标题',
        //                             value: '影片0',
        //                             tips: '选填，不超过20个字',
        //                             max: 20,
        //                             status: true,
        //                             video: ''
        //                         },
        //                         {
        //                             title: '链接',
        //                             value: '',
        //                             tips: '请输入链接',
        //                             max: 100,
        //                             status: true,
        //                             video: ''
        //                         },
        //                         {
        //                             title: '描述',
        //                             value: '描述文本',
        //                             tips: '请输入描述文本',
        //                             max: 300,
        //                             status: true,
        //                             video: ''
        //                         },
        //                     ],
        //                     duration: '60分钟',
        //                     desc: '',
        //                     status: true
        //                 },
        //             ]
        //         }
        //     },
        //     deep: true,
        // },
    },
    mounted() {
        this.$nextTick(() => {
            let value = JSON.parse(JSON.stringify(this.$store.state.mobildConfig.defaultArray[this.num]));
            this.configObj = value;
        });
    },
    methods: {
        // 获取类型标题，更多链接，和弹窗表格参数
        getConfig(data) {
            if (!data.values) {
                this.$message.error('电影类型不能为空')
                this.loding = false
                return
            }
            let params = {}
            //来自于右击选择框的值
            if (data.typeId) {
                this.configObj.titleConfig.val = data.values
                params = { typeId: data.typeId, limit: 10, page: 1 }
            } else {
                // 来自于输入框的值
                params = { name: data.values, limit: 10, page: 1 }
            }
            // 更多链接赋值
            this.configObj.linkConfig.val = '/pages/watchMovie/search?name=' + data.values
            if (this.configObj.linkConfig.val) {
                this.configObj.menuBigConfig.typeTableParams = params
                this.configObj.menuSmallConfig.typeTableParams = params
                // this.configObj.menuBigConfig.typeName = data.values
                // this.configObj.menuSmallConfig.typeName = data.values
            }
        },
    },
};
</script>

<style scoped lang="scss">
.pro {

    //padding: 15px 15px 0;
    .tips {
        height: 50px;
        line-height: 50px;
        color: #999;
        font-size: 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .btn-box {
        padding-bottom: 20px;
    }
}
</style>